<template>
	<view class="addressCom">
		<!-- 选择地址盒子 -->
		<view class="address-chooseBox" v-if="JSON.stringify(address) === '{}'">
			<button type="primary" size="mini" @click="chooseAddress">请选择收货地址+</button>
		</view>
		
		<!-- 地址渲染盒子 -->
		<view class="address-InfoBox" v-else @click="chooseAddress">
			<view class="uname-uphone">
				<view class="">
					姓名:{{address.userName}}
				</view>
				<view class="">
					电话:{{address.telNumber}}
					<uni-icons type="arrowright" size="15"></uni-icons>
				</view>
			</view>
			<view class="uaddress">
				地址:{{addstr}}
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations, mapGetters } from 'vuex'
	export default {
		name:"my-address",
		data() {
			return {
				// address:{}
			}
		},
		created() {
				console.log(this.address)
		},
		methods:{
			// ...mapMutations('m_user', ['updateAddress']),
			// async chooseAddress() {
			//   const [err, succ] = await uni.chooseAddress().catch((err) => err)
			//   if (err === null && succ.errMsg === 'chooseAddress:ok') {
			//     this.updateAddress(succ)
			//   }
			// },
			
			...mapMutations('m_user', ['updateAddress']),
			// 选择收货地址
			async chooseAddress(){
				let that = this
				await uni.chooseAddress({
					success(res){
					// console.log(res)
					that.updateAddress(res)
					},
					fail(err){
						console.log(err)
					}
				})
			}
		},
		computed:{
			...mapState('m_user',['address']),
			...mapGetters('m_user',['addstr']),
		}
	}
</script>

<style lang="scss">
	.address-InfoBox{
		padding: 20rpx;
		height: 200rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		.uname-uphone{
			display: flex;
			justify-content:space-between;
		}
	}
.address-chooseBox{
	height: 200rpx;
	display: flex;
	align-items: center;
}
.addressCom{
	height: 200rpx;
	border-bottom: 2rpx solid #b7b7b7;
	
}
</style>
